<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			天王盖地虎
			
		</div>
		<button>隐藏</button>
	</body>
	<script src="jquery-3.2.1.js"></script>
	<script type="text/javascript">
		//dom==>jquery对象
		
		var oDiv = document.getElementById('box');
		console.log($(oDiv));
		
		$(oDiv).click(function(){
//			alert(111);
		})
		
		//第一种方式 jquery ===>DOM对象
		console.log($('button')[0]);
		
		//第二种方式
		console.log($('button').get(0));
		var isShow = true;
		
		$('button').get(0).onclick = function(){
//			alert(222);


			if(isShow){
				$('#box').hide();
		
//				console.log($(this));
				$(this).text('显示');
				isShow = false;
				
			}else{
				$('#box').show();
		
//				console.log($(this));
				$(this).text('隐藏');
				isShow = true;
			}
			
			
			
		}
		
		
		
	</script>
	
</html>
